<!DOCTYPE html>
<html lang='cn' xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>订单列表</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <meta content="" name="description"/>
    <meta content="" name="author"/>
    <link th:href="@{/backend/css/bootstrap.min.css}" href="../../../static/backend/css/bootstrap.min.css"
          rel="stylesheet" type="text/css"/>
    <link th:href="@{/backend/css/bootstrap-responsive.min.css}"
          href="../../../static/backend/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css"/>
    <link th:href="@{/backend/css/font-awesome.min.css}" href="../../../static/backend/css/font-awesome.min.css"
          rel="stylesheet" type="text/css"/>
    <link th:href="@{/backend/css/style-metro.css}" href="../../../static/backend/css/style-metro.css" rel="stylesheet"
          type="text/css"/>
    <link th:href="@{/backend/css/style.css}" href="../../../static/backend/css/style.css" rel="stylesheet"
          type="text/css"/>
    <link th:href="@{/backend/css/style-responsive.css}" href="../../../static/backend/css/style-responsive.css"
          rel="stylesheet" type="text/css"/>
    <link th:href="@{/backend/css/default.css}" href="../../../static/backend/css/default.css" rel="stylesheet"
          type="text/css" id="style_color"/>
    <link th:href="@{/backend/css/uniform.default.css}" href="../../../static/backend/css/uniform.default.css"
          rel="stylesheet" type="text/css"/>
    <link th:href="@{/backend/css/pagination.css}" href="../../../static/backend/css/pagination.css" rel="stylesheet"
          type="text/css"/>
    <link rel="shortcut icon" th:href="@{/backend/images/favicon.ico}"
          href="../../../static/backend/images/favicon.ico"/>
    <link href="../../../static/backend/css/Pager.css" th:href="@{/backend/css/Pager.css}" rel="stylesheet"
          type="text/css"/>
</head>

<body>
<div class="container-fluid">
    <div class="row-fluid">
        <h3 class="page-title"><i class="fa fa-file-text"></i> 订单管理</h3>
        <ul class="breadcrumb">
            <li>
                <a href="#"><i class="fa fa-home"></i>订单管理</a>
                <i class="fa fa-angle-right"></i>
            </li>
            <li>
                <a href="#">订单列表</a>
            </li>
        </ul>
    </div>
    <div class="row-fluid">
        <div class="portlet">
            <div class="portlet-title">
                <div class="caption">
                    <i class="fa fa-reorder"></i>
                    订单列表
                </div>
            </div>
            <div class="portlet-body">
                <table id="orderTable" class="table table-advance table-hover">
                    <thead>
                    <tr>
                        <th>订单编号</th>
                        <th>客户编号</th>
                        <th>收货人</th>
                        <th>手机号</th>
                        <th>收货地址</th>
                        <th>订单金额</th>
                        <th>订单状态</th>
                        <th>订单时间</th>
                        <th width="50%">订单详情</th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <!--分页-->
                <div id="pager"></div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/backend/js/jquery-1.10.1.min.js}" src="../../../static/backend/js/jquery-1.10.1.min.js"
        type="text/javascript"></script>
<script src="../../../static/frontend/layer/layer.js" th:src="@{/frontend/layer/layer.js}"></script>
<script th:src="@{/backend/js/jquery-migrate-1.2.1.min.js}" src="../../../static/backend/js/jquery-migrate-1.2.1.min.js"
        type="text/javascript"></script>
<!-- IMPORTANT! Load jquery-ui-1.10.1.custom.min.js before bootstrap.min.js to fix bootstrap tooltip conflict with jquery ui tooltip -->
<script th:src="@{/backend/js/jquery-ui-1.10.1.custom.min.js}"
        src="../../../static/backend/js/jquery-ui-1.10.1.custom.min.js" type="text/javascript"></script>
<script th:src="@{/backend/js/bootstrap.min.js}" src="../../../static/backend/js/bootstrap.min.js"
        type="text/javascript"></script>
<script th:src="@{/backend/js/jquery.slimscroll.min.js}" src="../../../static/backend/js/jquery.slimscroll.min.js"
        type="text/javascript"></script>
<script th:src="@{/backend/js/jquery.blockui.min.js}" src="../../../static/backend/js/jquery.blockui.min.js"
        type="text/javascript"></script>
<script th:src="@{/backend/js/jquery.cookie.min.js}" src="../../../static/backend/js/jquery.cookie.min.js"
        type="text/javascript"></script>
<script th:src="@{/backend/js/jquery.uniform.min.js}" src="../../../static/backend/js/jquery.uniform.min.js"
        type="text/javascript"></script>
<script th:src="@{/backend/js/app.js}" src="../../../static/backend/js/app.js" type="text/javascript"></script>
<script th:src="@{/backend/js/jquery.pagination.js}" src="../../../static/backend/js/jquery.pagination.js"
        type="text/javascript"></script>
<script src="../../../static/backend/js/jquery.pager.js" th:src="@{/backend/js/jquery.pager.js}"
        type="text/javascript"></script>
<script th:inline="javascript" type="text/javascript">


    //获取所有产品入口
    var pagetotal;
    var pageSize = 7;
    $(function () {
                $.ajax({
                    url: "/fleastreet/manager/order/total",
                    type: "get",

                    success: function (result) {
                        if (result.code == 0) {
                            pagetotal = Math.ceil(result.data / pageSize);
                            $("#pager").pager({pagenumber: 1, pagecount: pagetotal, buttonClickCallback: PageClick});
                        } else {
                            layer.msg("获取order/total失败：" + result.msg);
                        }
                    }
                });
            },
            PageClick(1));


    function PageClick(pageclickednumber) {
        $("#pager").pager({pagenumber: pageclickednumber, pagecount: pagetotal, buttonClickCallback: PageClick});
//    var index = (pageclickednumber - 1) * pageSize + 1;
        $.ajax({
            type: "post",
            //分页查询，每页7个
            url: "/fleastreet/manager/order/list/" + pageclickednumber,
            success: function (result) {
                if (result.code == 0) {
                    showList(result.data);
                } else {
                    layer.msg("获取/order/list失败：" + result.msg);
                }
            }
        });
    }

    function showList(data) {
        if (!data || !data.length > 0) {
            return;
        }
        //清空表
        var tbody = $("#orderTable tbody").eq(0);
        tbody.html("");
        for (var i = 0; i < data.length; i++) {
            var tr = $("<tr style='display:none;'></tr>");
            tr.append($("<td></td>").text(data[i].orderId));
            tr.append($("<td></td>").text(data[i].userId));
            tr.append($("<td></td>").text(data[i].consignee == null ? '' : data[i].consignee));
            tr.append($("<td></td>").text(data[i].userPhone));
            tr.append($("<td></td>").text(data[i].orderArea));
            tr.append($("<td></td>").text("￥" + data[i].total));
            var state = data[i].state;
            if (state == 1) {
                tr.append($("<td></td>").html('<span style="border-radius: 5px !important;" class="label label-important">待付款</span>'));
            } else if (state == 2) {
                tr.append($("<td></td>").html("<button onclick='send(" + data[i].orderId + ",this)' class='label label-success'>待发货</button>"));
            } else if (state == 3) {
                tr.append($("<td></td>").html('<span style="border-radius: 5px !important;" class="label label-info">待收货</span>'));
            } else if (state == 0) {
                tr.append($("<td></td>").html('<span style="border-radius: 5px !important;" class="label label-default">订单完成</span>'));
            } else if (state == -1) {
                tr.append($("<td></td>").html('<span style="border-radius: 5px !important;" class="label label-warning">已取消</span>'));
            } else {
                tr.append($("<td></td>").html('<span style="border-radius: 5px !important;" class="label label-inverse">未知状态</span>'));
            }
            tr.append($("<td></td>").html('<span class="label label-default" style="border-radius: 5px !important;">' + data[i].createTime + '</span>'));
            tr.append($("<td></td>")
                    .append($('<div style="margin:0;" class="portlet box light-blue"><div id="detail_' + i + '"  onmouseenter="getDetail(' + data[i].orderId + ',\'detail_' + i + '\')" class="portlet-title"><div class="caption">订单详情</div><div class="tools"><a href="javascript:;" onclick="change(this)" id=\'style' + i + '\'  class="expand" style="color: #FFFFFF;"><i class="fa fa-caret-down"></i></a></div></div><div class="portlet-body" style="display: none;"><table class="table table-bordered table-hover"></table></div></div>')));
            tbody.append(tr);
            tr.fadeIn();
        }

    }

    function change(e) {
        var el = jQuery(e).closest(".portlet").children(".portlet-body");
        if (jQuery(e).hasClass("collapse")) {
            jQuery(e).removeClass("collapse").addClass("expand");
            el.slideUp(200);
        } else {
            jQuery(e).removeClass("expand").addClass("collapse");
            el.slideDown(200);
        }
    }


    function getDetail(orderId, id) {
        var div = "#" + id;
        if ($(div).next().find("table").html()) {
            return;
        }

        if (!orderId) {
            layer.msg("订单编号为空");
            return;
        }
        $.ajax({
            url: "/fleastreet/manager/order/item/detail/" + orderId,
            type: "get",
            success: function (result) {
                if (result.code == 0) {
                    for (var i = 0; i < result.data.length; i++) {
                        var item = result.data[i];
                        var tr = $("<tr></tr>");
                        tr.append($("<td><img style='display: block;height: 50px;max-width: 100%;' src='/fleastreet/manager/product/img/" + item.productId + "'/></td>"));
                        tr.append($("<td ></td>").text(item.productId));
                        tr.append($("<td></td>").text(item.productQuantity + "件"));
                        tr.append($("<td></td>").text("￥" + item.subTotal));
                        $(div).next().find("table").append(tr);
                    }
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("连接错误！");
            }
        });
    }

    function send(orderId, btn) {
        if (!orderId) {
            layer.msg("订单编号为空");
            return;
        }
        $.ajax({
            url: "/fleastreet/manager/order/state/"+orderId,
            type: "post",
            success: function (result) {
                if (result.code == 0) {
                    layer.msg("发货成功！");
                    $(btn).parent().html('<span style="border-radius: 5px !important;" class="label label-info">待收货</span>');
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("连接错误！");
            }
        });
    }
    //    ]]>
</script>
</body>

</html>